<template>
  <div>
    <el-form>
      <el-row>
        <el-col :span="15" style="display: flex;justify-content: flex-end;padding-right: 0px">
          <el-form-item style="width:40%">
            <el-select v-model="localShanXiTourismQuery.type" placeholder="请选择景点类型">
              <el-option label="自然风光" value="cc"></el-option>
              <el-option label="历史文化" value="hz"></el-option>
              <el-option label="现代建筑" value="zz"></el-option>
              <el-option label="其他" value="bj"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:40%">
            <el-select v-model="localShanXiTourismQuery.sname" placeholder="请选择景点" >
              <el-option label="长春" value="cc"></el-option>
              <el-option label="杭州" value="hz"></el-option>
              <el-option label="郑州" value="zz"></el-option>
              <el-option label="北京" value="bj"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:40%">
            <el-select v-model="localShanXiTourismQuery.destination" placeholder="请选择目的地城市" >
              <el-option v-for="city in cityArr" :label="city" :value="city"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:40%">
            <el-select v-model="localShanXiTourismQuery.agentType" placeholder="请选择旅行团类型" >
              <el-option label="亲子游" value="亲子游"></el-option>
              <el-option label="度假游" value="度假游"></el-option>
              <el-option label="老年团" value="老年团"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:40%">
            <el-select v-model="localShanXiTourismQuery.price" placeholder="请选择价格范围" >
              <el-option label="1000以内" value="500"></el-option>
              <el-option label="1000-2000" value="1500"></el-option>
              <el-option label="2000-3000" value="2500"></el-option>
              <el-option label="3000-4000" value="3500"></el-option>
              <el-option label="4000-5000" value="4500"></el-option>
              <el-option label="5000以上" value="5500"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3" style="display: flex;justify-content: flex-start;">
          <el-form-item>
            <el-input
                style="width: 150%"
                ref="searchInput"
                placeholder="请输入搜索内容"
                prefix-icon="el-icon-search"
                :class="{ 'rounded-input': true }"
                type="text"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="1" style="display: flex;justify-content: flex-start;">
          <el-form-item>
            <el-button type="success" style="text-align: center;background-color: deepskyblue" @click="resetSearch">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="text-align: center;background-color: orange" @click="selectTravelAgent">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div>
    <el-form>
      <el-form-item>
        <span style="font-size:20px">为您推荐:</span>
      </el-form-item>
      <el-form-item>
        <span style="font-size:20px">景点/场馆</span>&nbsp;&nbsp;&nbsp;
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.sname='五爷庙'">五爷庙</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.sname='云冈石窟'">云冈石窟</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.sname='悬空寺'">悬空寺</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">菩萨顶</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">显通寺</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">乔家大院</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">雁门关</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:110px;height:30px;">晋祠博物馆</el-button>
      </el-form-item>
      <el-form-item>
        <span style="font-size:20px">目的地城市</span>&nbsp;&nbsp;&nbsp;
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.destination='忻州'">忻州</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.destination='大同'">大同</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.destination='临汾'">临汾</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">长治</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">榆次</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">运城</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">吕梁</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:110px;height:30px;">霍州</el-button>
      </el-form-item>
      <el-form-item>
        <span style="font-size:20px">产品类型</span>&nbsp;&nbsp;&nbsp;
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.agentType='跟团游'">跟团游</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.agentType='自由行'">自由行</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.agentType='老年团'">老年团</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.agentType='亲子游'">亲子游</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">临汾</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">菩萨顶</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">显通寺</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">乔家大院</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;">雁门关</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:110px;height:30px;">晋祠博物馆</el-button>
      </el-form-item>
      <el-form-item>
        <span style="font-size:20px">旅行团价格</span>&nbsp;&nbsp;&nbsp;
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.price='500'">1000以内</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.price='1500'">1000-2000</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.price='2500'">2000-3000</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.price='3500'">3000-4000</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.price='4500'">4000-5000</el-button>
        <el-button link style="border: solid;border-color:#87cefa;width:100px;height:30px;" @click="localShanXiTourismQuery.price='5500'">5000以上</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20" style="width: 85%;">
      <el-col :span="4.8" v-for="p in localShanXiTourismArr1" style="margin: 0;">
        <el-card style="padding-bottom:20px;width: 250px;height: 250px;position: relative">
          <img :src='p.imageUrl' style="width: 100%;height: 50%;display: block" >
          <!--          <h5 style="display: block;position: absolute;top: 50px;left:25px;color: white;font-size: 30px;font-weight: bold;">
                      {{ p.title }}</h5><br>-->
          <el-button link type="primary" size="small"  @click="routeUrl(p.travelDetailId)">
              <span style="display: block;position: absolute;top: 165px;left:20px;color: black;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
          font-size: 13px;font-weight:lighter;width: 200px;height: 200px;">{{ p.description }}<br></span><br>

              <span style="display: block;position: absolute;top: 78%;left:40%;color: orangered;font-size: 20px;font-weight:bold">{{ p.price }}<br></span><br>
          </el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";

const routeUrl = (id) => {
  console.log(id);
  router.push('/shanxiwutaishan?id='+id);
}

const travelDetailId = new URLSearchParams(window.location.search).get('id');

//查询参数
const localShanXiTourismQuery = ref({
  travelDetailId:travelDetailId,
  type:'',
  sname:'',
  agentType:'',
  destination:'',
  price:''
})

const resetSearch = () => {
  localShanXiTourismQuery.value = {};
}

//城市信息
const cityArr = ref([])

//查询城市
const searchCityArr = () => {
  axios.post(BASE_URL+'/travelagent/selectcity')
      .then((response)=>{
        if(response.data.code===2000){
          cityArr.value = response.data.data;
          console.log(cityArr.value)
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

//旅行团信息
const localShanXiTourismArr1 = ref([]);

//查找旅行团信息
const selectTravelAgent = () => {
  let data = qs.stringify(localShanXiTourismQuery.value);
  console.log(data)
  axios.get(BASE_URL+'/travelagent/select?'+data)
      .then((response)=>{
        if(response.data.code===2000) {
          localShanXiTourismArr1.value = response.data.data
          console.log(localShanXiTourismArr1.value )
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}

onMounted(()=>{
  selectTravelAgent();
  searchCityArr();
})

const localShanXiTourismArr = ref([
  {
    title: "五台山",
    info: "山西五台山·2日1晚跟团游·【万人之选 佛韵禅音 祈福专线】【一价全含】 赠10公里之内上门接+40元景区小交通+(安排景区内酒店) 五爷庙+拜五方文殊+姻缘梵仙山 优先安排金牌导游无损退款】",
    url: "/travelAgent/index/travel1.jpg",
    price: "￥160起"
  },
  {
    title: "山西平遥",
    info: "山西平遥·2日1晚跟团【特色客栈体验+首道门票全含+含壶口景交+可选旅拍套餐】【真纯玩团】【古城半天自由活动】 逛两院踏寻晋商足迹· 留古城赏夜景美色；",
    url: "/travelAgent/index/travel2.jpg",
    price: "￥168起"
  },
  {
    title: "山西王家大院",
    info: "山西王家大院·2日1晚跟团游【金秋国庆4人立减200元】参观一城（平遥古城自由活动-可自行旅拍穿越晋商少奶奶）+双院（王/乔家）+一瀑布（黄河壶口）|含壶口景交赠王家耳麦|宿特色客栈",
    info1: "随心组合",
    url: "/travelAgent/index/travel3.jpg",
    price: "￥170起"
  },{
    title: "山西大同",
    info: "山西大同·2日1晚跟团游（游悟空同款）【晋北深度游+一车一导+宿古都大同舒适酒店+已含云冈石窟景区小交通】",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "跟团游",
    info: "省钱省心·一站打包",
    url: "/travelAgent/index/travel1.jpg",
    price: "￥160起"
  },
  {
    title: "私家游",
    info: "独立出行·行程可调",
    url: "/travelAgent/index/travel2.jpg",
    price: "￥160起"
  },
  {
    title: "自由行",
    info: "交通·酒店·景点",
    info1: "随心组合",
    url: "/travelAgent/index/travel3.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  },{
    title: "定制旅游",
    info: "出行省心·玩得尽兴",
    url: "/travelAgent/index/travel4.jpg",
    price: "￥160起"
  }
]);

</script>


<style scoped>

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* 根据需要调整宽度 */
  position: relative;
}

.tooltip {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  z-index: 1000;
  white-space: pre-wrap; /* 保持换行 */
}

</style>